<template>
    <el-table :data="rightList" style="width: 100%" row-key="path">
        <el-table-column prop="title" label="权限名称" width="180">
        </el-table-column>
        <!-- 自定义 -->
        <el-table-column label="图表" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon size="20px">
                        <component :is="mapIcons[scope.row.icon]"></component>
                    </el-icon>
                </div>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button round type="warning" @click="handleUpdate(scope.row)">更新</el-button>
                <el-popconfirm title="你确定要删除吗?" @confirm="handleDelete(scope.row)" confirm-button-text="确定"
                    cancel-button-text="取消">
                    <template #reference>
                        <el-button type="danger" round>删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <!-- 隐藏显示框 -->
    <el-dialog v-model="dialogVisible" title="更新权限" width="500">
        <el-form ref="updateFormRef" style="max-width: 600px" :model="updateForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="权限名称" prop="title">
                <el-input v-model="updateForm.title" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm()">
                    更新
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import {
    HomeFilled,
    User,
    Key,
    OfficeBuilding,
    UploadFilled,
    List
} from '@element-plus/icons-vue'

// 映射图标
const mapIcons = {
    HomeFilled,
    User,
    Key,
    OfficeBuilding,
    UploadFilled,
    List
}

const rightList = ref([])
// 获取rights列表数据
const getRightList = async () => {
    let res = await axios.get("/adminapi/rights")
    rightList.value = res.data
    console.log(rightList.value);
}

// 页面渲染完成后掉函数
onMounted(() => getRightList())

// 显示隐藏
const dialogVisible = ref(false)
// 表单校验
const updateFormRef = ref()
const currentItem = ref({})
const updateForm = reactive({
    title: "",
})
const rules = reactive({
    title: [
        { required: true, message: '请输入首页名称', trigger: 'blur' },
    ],
})

// 更新
const handleUpdate = (item) => {
    // console.log(item);
    currentItem.value = item
    updateForm.title = item.title
    dialogVisible.value = true
}

const handleConfirm = () => {
    updateFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            await axios.put(`/adminapi/rights/${currentItem.value.id}`, updateForm)
            dialogVisible.value = false

            await getRightList()
        } else {
            console.log('error submit!', fields)
        }
    })
}



const handleDelete = ({ id }) => {
    console.log(id)
}

</script>